<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="userProfile.title"/></title>
    <meta name="menu" content="Profile"/>
</head>

<style>
.hide-long-text{
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}
.tooltip-inner{
	max-width:600px;
}
</style>
<c:set var="delObject" scope="request"><fmt:message key="userList.user"/></c:set>
<c:set var="unknownVal" scope="request"><fmt:message key="user.unknown"/></c:set>

<script type="text/javascript">var msgDelConfirm =
   "<fmt:message key="delete.confirm"><fmt:param value="${delObject}"/></fmt:message>";
</script>
<div class="row-fluid">
	<div class="thumbnails">
		<div class="span2">
			<a class="thumbnail" href="#">
				<img alt="160x120" data-src="holder.js/160x120" style="width: 160px; height: 120px" src="">
			</a>
		</div>
		<div class="span2">
			<br>
			<p class="hide-long-text" data-placement="top" data-toggle="tooltip" data-original-title="${user.email}"><c:out value="${user.email}" escapeXml="false"/></p>
			<p><c:out value="${user.username}" escapeXml="false"/></p>
			<a href="#"><fmt:message key="userProfile.changeavatar"/></a>
		</div>
		<div class="span2">
			<br>
			<a class="btn btn-small" href="#editacc" role="button" data-toggle="modal"><i class="icon-pencil"></i> <fmt:message key="profile.accSetting"/></a>
		</div>
	</div>
</div>
<br>
<br>

<ul class="nav nav-list">
	<li class="divider"></li>
</ul>
<div class="row-fluid">
	<div class="span6" style="border-right: 1px solid #E5E5E5;">
		<div class="row-fluid">
			<div class="span9">
				<h4><fmt:message key="userProfile.basicInfo"/></h4>
			</div>
			<div class="span2">
				<br>
				<a class="btn btn-small" href="#editinfo" role="button" data-toggle="modal"><i class="icon-pencil"></i> <fmt:message key="profile.edit"/></a>
			</div>
		</div>
	    <div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.fullName"/></label>
			</div>
			<div class="span6">
		       <c:out value="${user.fullName}" escapeXml="false" default="${unknownVal}"/>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.passwordHint"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${user.passwordHint}">
				       <c:out value="${user.passwordHint}" escapeXml="false" default="${unknownVal}"/>
				    </c:when>
				    <c:otherwise>
				        <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.gender"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${user.gender}">
				       <c:out value="${user.gender}" escapeXml="false" default="${unknownVal}"/>
				    </c:when>
				    <c:otherwise>
				        <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.dob"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${user.dob}">
				       <c:out value="${user.dob}" escapeXml="false" default="${unknownVal}"/>
				    </c:when>
				    <c:otherwise>
				        <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.phoneNumber"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${user.phoneNumber}">
				       <c:out value="${user.phoneNumber}" escapeXml="false" default="${unknownVal}"/>
				    </c:when>
				    <c:otherwise>
				       <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.address"/></label>
			</div>
			<div class="span6">
				<c:choose>
				    <c:when test="${(user.address!=null && (user.address.address || user.address.city || user.address.province || user.address.country || user.address.postalCode))}">
				       <c:if test="${user.address.address}">
				       	<c:out value="${user.address.address}" escapeXml="false" default="${unknownVal}"/>,
				       </c:if>
				       <c:if test="${user.address.city}">
				       	<c:out value="${user.address.city}" escapeXml="false" default="${unknownVal}"/> <fmt:message key="user.address.city"/>
				       </c:if>
				       <c:if test="${user.address.province}">
				       	<c:out value="${user.address.province}" escapeXml="false" default="${unknownVal}"/> <fmt:message key="user.address.province"/>
				       </c:if>
				       <c:if test="${user.address.postalCode}">
				       	<c:out value="${user.address.postalCode}" escapeXml="false" default="${unknownVal}"/>
				       </c:if>
				    </c:when>
				    <c:otherwise>
				       <c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/>
				    </c:otherwise>
				</c:choose>
				
			</div>
		</div>
	</div>
<!-- 	<div class="span1" style="border-left: 1px solid gray;"> -->
<!-- 	</div> -->
	<div class="span6">
		<div class="row-fluid">
			<div class="span9">
				<h4><fmt:message key="userProfile.statistic"/></h4>
			</div>
			<div class="span2">
				<br>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.balance"/> (VND)</label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.balance}">
						<c:out value="${user.balance}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false"/>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.rate"/> (%)</label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.rate}">
						<c:out value="${user.rate}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.succRate"/> (%)</label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.succRate}">
						<c:out value="${user.succRate}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.jobWorked"/></label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.jobWorked}">
						<c:out value="${user.jobWorked}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span4">
				<label style="color:grey;"><fmt:message key="user.jobPosted"/></label>
			</div>
			<div class="span8">
				<c:choose>
					<c:when test="${user.jobPosted}">
						<c:out value="${user.jobPosted}" escapeXml="false" />
					</c:when>
					<c:otherwise>
						<c:out value="0" escapeXml="false" />
					</c:otherwise>
				</c:choose>
			</div>
		</div>
<!-- 		<div class="row-fluid"> -->
<!-- 			<div class="span4"> -->
<%-- 				<label style="color:grey;"><fmt:message key="user.jobPosted"/></label> --%>
<!-- 			</div> -->
<!-- 			<div class="span8"> -->
<%-- 				<c:choose> --%>
<%-- 					<c:when test="${user.jobPosted}"> --%>
<%-- 						<c:out value="${user.jobPosted}" escapeXml="false" default="${unknownVal}"/> --%>
<%-- 					</c:when> --%>
<%-- 					<c:otherwise> --%>
<%-- 						<c:out value="${unknownVal}" escapeXml="false" default="${unknownVal}"/> --%>
<%-- 					</c:otherwise> --%>
<%-- 				</c:choose> --%>
<!-- 			</div> -->
<!-- 		</div> -->
	</div>
</div>

     
    
    
<c:set var="scripts" scope="request">
<script type="text/javascript">
(function(){
	$('.hide-long-text').each(function()
	{
		var $ele = $(this);
		if (this.offsetWidth < this.scrollWidth)
		{
			$ele.tooltip();
		}
	});
	
})();
</script>
</c:set>

<!-- Edit info Modal -->
    <div id="editacc" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h4 id="myModalLabel"><fmt:message key="profile.accSetting"/></h4>
    	</div>
	    <div class="modal-body">
	    	
	    	
	    	<div class="accsetting">
	    		
		    	<div class="row-fluid accrow">
		    		<form:form commandName="user" method="post" id="editfn" autocomplete="off" cssClass="" >
					<div class="span3 acclabel">
						<fmt:message key="user.fullName"/>
					</div>
					<div class="span7 accbody" data-content="<c:out value="${user.fullName}"/>">
						<c:out value="${user.fullName}"/>
					</div>
					<div class="span8 accedit">
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.firstName"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.firstName">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:input class="accfield" path="firstName" id="firstName" maxlength="50" data-init="${user.firstName}"/>
						                	<form:errors path="firstName" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.lastName"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.lastName">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:input class="accfield" path="lastName" id="lastName" maxlength="50" data-init="${user.lastName}"/>
						                	<form:errors path="lastName" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
								</span>
								<span class="span8">
									<button class="btn btn-small btn-primary">save</button>
									<button class="btn btn-small btn-collapse">close</button>
								</span>
							</span>
						</div>	
					<div class="span2 accaction">
						<div class="span3 offset5 accicon">
							<i class="icon-pencil"></i>
						</div>
						<div class="span4">
							<fmt:message key="profile.edit"/>
						</div>
					</div>  
					</form:form>		
		    	</div>
		    	
		    	
		    	<div class="row-fluid accrow">
		    		<form:form commandName="user" method="post" action="editfn" id="emailForm" autocomplete="off" cssClass="" >
					<div class="span3 acclabel">
						<fmt:message key="user.email"/>
					</div>
					<div class="span7 accbody" data-content="<c:out value="${user.email}"/>">
						<c:out value="${user.email}"/>
					</div>
					<div class="span8 accedit">
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.email"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.email">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:input class="accfield" path="email" id="email" maxlength="50" data-init="${user.email}"/>
						                	<form:errors path="email" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
									<label><fmt:message key="user.password"/></label>
								</span>
								<span class="span8">
									<spring:bind path="user.password">
        							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
        							</spring:bind>
            							<div class="controls">
	                						<form:password class="accfield" path="password" id="password" maxlength="50" data-init=""/>
						                	<form:errors path="password" cssClass="help-inline"/>
					            		</div>
					        		</fieldset>
								</span>
							</span>
							<span class="row-fluid">
								<span class="span4">
								</span>
								<span class="span8">
									<button class="btn btn-small btn-primary">save</button>
									<button class="btn btn-small btn-collapse">close</button>
								</span>
							</span>
					</div>	  
					<div class="span2 accaction">
						<div class="span3 offset5 accicon">
							<i class="icon-pencil"></i>
						</div>
						<div class="span4">
							<fmt:message key="profile.edit"/>
						</div>
					</div>  	
					</form:form>
		    	</div>
		    	
		    	
		    	<div class="row-fluid accrow">
		    		<form:form commandName="user" method="post" action="editfn" id="pwdForm" autocomplete="off" cssClass="">
					<div class="span3 acclabel">
						<fmt:message key="user.password"/>
					</div>
					<div class="span7 accbody" data-content="*********">
						*********
					</div>
					<div class="span8 accedit">
						<span class="row-fluid">
							<span class="span5">
								<label><fmt:message key="user.currentPassword"/></label>
							</span>
							<span class="span7">
								<spring:bind path="user.password">
       							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
       							</spring:bind>
           							<div class="controls">
                						<form:password class="accfield" path="password" id="password" maxlength="50" data-init=""/>
					                	<form:errors path="password" cssClass="help-inline"/>
				            		</div>
				        		</fieldset>
							</span>
						</span>
						<span class="row-fluid">
							<span class="span5">
								<label><fmt:message key="user.newPassword"/></label>
							</span>
							<span class="span7">
								<spring:bind path="user.newPassword">
       							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
       							</spring:bind>
           							<div class="controls">
                						<form:password class="accfield" path="newPassword" id="newPassword" maxlength="50" data-init=""/>
					                	<form:errors path="newPassword" cssClass="help-inline"/>
				            		</div>
				        		</fieldset>
							</span>
						</span>
						<span class="row-fluid">
							<span class="span5">
								<label><fmt:message key="user.confirmPassword"/></label>
							</span>
							<span class="span7">
								<spring:bind path="user.confirmPassword">
       							<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
       							</spring:bind>
           							<div class="controls">
                						<form:password class="accfield" path="confirmPassword" id="confirmPassword" maxlength="50" data-init=""/>
					                	<form:errors path="confirmPassword" cssClass="help-inline"/>
				            		</div>
				        		</fieldset>
							</span>
						</span>
						<span class="row-fluid">
							<span class="span5">
							</span>
							<span class="span7">
								<button class="btn btn-small btn-primary">save</button>
								<button class="btn btn-small btn-collapse">close</button>
							</span>
						</span>
					</div>
					<div class="span2 accaction">
						<div class="span3 offset5 accicon">
							<i class="icon-pencil"></i>
						</div>
						<div class="span4">
							<fmt:message key="profile.edit"/>
						</div>
					</div>  	
					</form:form>  	
		    	</div>
	    	</div>
	    </div>
	    <div class="modal-footer">
	    	<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	    </div>
    </div>
<c:set var="scripts" scope="request">
<script type="text/javascript" src="<c:url value='/scripts/accsetting.js'/>"></script>
<script type="text/javascript">
	(function($){
		var $edit = $('#editacc .accsetting').accsetting();
		$('#editacc').on('hidden',function(){
			$edit.init();
		});
		
		$('#editfn').submit(function(e){
			e.stopPropagation();
			validateEditfn(this);
			var data = $(this).serialize();
			$.ajat({
				url: 'editfn'
				,type: 'post'
				,data: data
				,success: function(){
					
				}
			});
return false;
		});
	}(jQuery));
	
</script>
</c:set>
<v:javascript formName="editfn" staticJavascript="false"/>
<script type="text/javascript" src="<c:url value="/scripts/validator.jsp"/>"></script>